import React, { useState } from 'react';
import { Card, Table, Button, Space, Tag, Switch, Input, Form, Modal, Upload, Select, DatePicker, message, Typography, Divider, Tooltip } from 'antd';
import { PlusOutlined, SearchOutlined, UploadOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { TextArea } = Input;
const { Title } = Typography;

interface AnnouncementItem {
  key: string;
  title: string;
  type: string;
  publisher: string;
  publishTime: string;
  status: string;
  isTop: boolean;
}

const Announcement: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      console.log('Form values:', values);
      setIsModalVisible(false);
      form.resetFields();
      message.success('公告创建成功');
    }).catch(errorInfo => {
      console.log('Validate Failed:', errorInfo);
    });
  };

  const handleTopChange = (checked: boolean, record: AnnouncementItem) => {
    console.log(`置顶状态改变: ${checked}`, record);
    message.success(`${checked ? '已置顶' : '已取消置顶'}: ${record.title}`);
  };

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: '30%',
      render: (text: string) => (
        <div className="announcement-title">
          <img src="/logo.png" alt="logo" className="announcement-thumb" />
          <div>
            <div className="announcement-title-text">{text}</div>
            <div className="announcement-subtitle">25日，国家卫生健康委就日印发的《居民卫生健康...</div>
          </div>
        </div>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => (
        <Tag color={type === '新闻' ? 'blue' : type === '公告' ? 'green' : 'orange'}>
          {type}
        </Tag>
      ),
    },
    {
      title: '发布人',
      dataIndex: 'publisher',
      key: 'publisher',
    },
    {
      title: '发布时间',
      dataIndex: 'publishTime',
      key: 'publishTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === '已发布' ? 'green' : status === '待审核' ? 'orange' : 'default'}>
          {status}
        </Tag>
      ),
    },
    {
      title: '置顶',
      dataIndex: 'isTop',
      key: 'isTop',
      render: (isTop: boolean, record: AnnouncementItem) => (
        <Switch 
          checked={isTop} 
          onChange={(checked) => handleTopChange(checked, record)}
          size="small"
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: AnnouncementItem) => (
        <Space size="small" split={<Divider type="vertical" />} className="operation-links">
          {record.status === '已发布' ? (
            <>
              <a className="link-text"><EditOutlined /> 提交修改</a>
              <a className="link-text"><EyeOutlined /> 查看</a>
              <a className="link-text"><DeleteOutlined /> 删除</a>
            </>
          ) : record.status === '待审核' ? (
            <a className="link-text">审核</a>
          ) : (
            <>
              <a className="link-text"><EditOutlined /> 编辑</a>
              <a className="link-text"><DeleteOutlined /> 删除</a>
            </>
          )}
        </Space>
      ),
    },
  ];

  const data: AnnouncementItem[] = [
    {
      key: '1',
      title: '国家卫健委：多措并举着力解决医疗服务',
      type: '新闻',
      publisher: '张医生',
      publishTime: '2023-05-15 14:30',
      status: '草稿',
      isTop: true,
    },
    {
      key: '2',
      title: '国家卫健委：多措并举着力解决医疗服务',
      type: '新闻',
      publisher: '王管理',
      publishTime: '2023-05-14 10:15',
      status: '待审核',
      isTop: false,
    },
    {
      key: '3',
      title: '国家卫健委：多措并举着力解决医疗服务',
      type: '新闻',
      publisher: '李主任',
      publishTime: '2023-05-12 09:30',
      status: '待审核',
      isTop: false,
    },
    {
      key: '4',
      title: '国家卫健委：多措并举着力解决医疗服务',
      type: '公告',
      publisher: '赵院长',
      publishTime: '2022-02-02',
      status: '已发布',
      isTop: false,
    },
  ];

  return (
    <div className="announcement-container">
      <div className="page-header">
        <Title level={4}>
          <span className="header-icon"></span>
          新闻公告管理
        </Title>
      </div>
      
      <Card bordered={false}>
        <div className="table-top">
          <Space>
            <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
              新增
            </Button>
            <Select defaultValue="all" style={{ width: 120 }}>
              <Option value="all">全部类型</Option>
              <Option value="news">新闻</Option>
              <Option value="announcement">公告</Option>
              <Option value="notification">通知</Option>
            </Select>
            <Select defaultValue="all" style={{ width: 120 }}>
              <Option value="all">全部状态</Option>
              <Option value="published">已发布</Option>
              <Option value="pending">待审核</Option>
              <Option value="draft">草稿</Option>
            </Select>
          </Space>
          <Input.Search
            placeholder="新闻标题"
            allowClear
            style={{ width: 300 }}
            enterButton={<Button type="primary"><SearchOutlined /></Button>}
          />
        </div>
        
        <Table 
          columns={columns} 
          dataSource={data} 
          pagination={{
            total: 100,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
            pageSize: 15,
            current: 1,
          }}
        />
      </Card>

      <Modal 
        title="新增公告" 
        visible={isModalVisible} 
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="draft" type="default">
            保存草稿
          </Button>,
          <Button key="submit" type="primary" onClick={handleOk}>
            发布
          </Button>,
        ]}
        width={800}
      >
        <Form
          form={form}
          layout="vertical"
          name="announcementForm"
        >

          <Form.Item
            name="title"
            label="标题"
            rules={[{ required: true, message: '请输入公告标题' }]}
          >
            <Input placeholder="请输入公告标题" />
          </Form.Item>
          <Form.Item
            name="type"
            label="类型"
            rules={[{ required: true, message: '请选择公告类型' }]}
          >
            <Select placeholder="请选择公告类型">
              <Option value="news">新闻</Option>
              <Option value="announcement">公告</Option>
              <Option value="notification">通知</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="content"
            label="内容"
            rules={[{ required: true, message: '请输入公告内容' }]}
          >
            <TextArea rows={10} placeholder="请输入公告内容" />
          </Form.Item>
          <Form.Item
            name="attachment"
            label="附件"
          >
            <Upload>
              <Button icon={<UploadOutlined />}>上传附件</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Announcement; 

